<template>
  <ElDrawer
    v-model="show"
    direction="rtl"
    size="75%"
    destroy-on-close
    :with-header="false"
    class="customer-leve-detail"
  >
    <ElScrollbar height="100%">
      <ElForm class="customer-leve-detail-form" label-width="auto" label-position="left">
        <ElFormItem label="店铺名称">{{ data['店铺名称'] }}</ElFormItem>
        <ElFormItem label="店铺类型">{{ data['店铺类型'] }}</ElFormItem>
        <ElFormItem label="店铺难度得分">{{ data['店铺难度得分'] }}</ElFormItem>
        <ElFormItem label="服务天数">{{ data['服务天数'] }}</ElFormItem>
        <ElFormItem label="服务天数得分">{{ data['服务天数得分'] }}</ElFormItem>
        <ElFormItem label="配合度">{{ data['配合度'] }}</ElFormItem>
        <ElFormItem label="配合度得分">{{ data['配合度得分'] }}</ElFormItem>
        <ElFormItem label="上个服务周期开始时间">{{ data['上个服务周期开始时间'] }}</ElFormItem>
        <ElFormItem label="上个服务周期截止时间">{{ data['上个服务周期截止时间'] }}</ElFormItem>
        <ElFormItem label="上个服务周期总效益">{{ data['上个服务周期总效益'] }}</ElFormItem>
        <ElFormItem label="上个服务周期总接待人数">{{ data['上个服务周期总接待人数'] }}</ElFormItem>
        <ElFormItem label="上个服务周期日均接待人数">{{ data['上个服务周期日均接待人数'] }}</ElFormItem>
        <ElFormItem label="上个服务周期效益占比">{{ data['上个服务周期效益占比'] }}</ElFormItem>
        <ElFormItem label="效益得分">{{ data['效益得分'] }}</ElFormItem>
        <ElFormItem label="总分">{{ data['总分'] }}</ElFormItem>
        <ElFormItem label="总评">{{ data['总评'] }}</ElFormItem>
      </ElForm>
    </ElScrollbar>
  </ElDrawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getCustomerLvlInfo } from '../api'

const show = ref(false)
const loading = ref(false)
const data = ref({})

const open = (row) => {
  show.value = true
  loading.value = true
  getCustomerLvlInfo({ shopId: row.shopId }).then(res => {
    data.value = res || {}
  }).finally(() => {
    loading.value = false
  })
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.customer-leve-detail {
  &-form {
    padding: 20px 60px;
  }
}
</style>